<template>
<view class="page-wrap">
  <u-modal v-model="modalOption.show" :title="modalOption.title" :show-confirm-button="false">
    <view style="padding: 30rpx">
      <view class="input-wrap" v-if="modalOption.type === 'input'">
        <input class="modal-input" placeholder="请输入" v-model="modalOption.value" type="text"/>
        <view v-if="modalOption.extra.inputType==='number'">年</view>
      </view>
      <view class="input-wrap" style="display: flex;justify-content: space-between;"
            v-if="modalOption.type === 'number'">
        <input class="modal-input" placeholder="请输入" v-model="modalOption.value" type="number"/>
        <view>年</view>
      </view>
      <view class="input-wrap" v-if="modalOption.type === 'textarea'">
        <textarea class="modal-input" placeholder="请输入" v-model="modalOption.value" type="number" maxlength="200"/>
      </view>

      <u-button :custom-style="{color:'white',background:'#3F70FF',marginTop:'30rpx'}" @click="onModalConfirm">保存</u-button>
    </view>
  </u-modal>
  <u-select v-model="modalOption.showCitySelect" mode="mutil-column-auto" @confirm="onConfirmCity"
            :params="{province:true,city:true,area:false}"
            :col="2"
            :list="area"></u-select>
  <u-popup v-model="popupOption.show" mode="bottom" border-radius="14">
    <view class="popup-wrap">
      <view class="header">
        <view @click="popupOption.show = false">取消</view>
        <view>{{ popupOption.title }}</view>
        <view @click="onPopupConfirm">保存</view>
      </view>
      <view class="tag-wrap">
        <view class="tag-list">
          <view class="tag-item" :class="item.active && 'active'" @click="onSelectTag(item)"
                v-for="item in popupOption.list" :key="item.id">
            {{ item.name }}
          </view>
        </view>
      </view>
    </view>
  </u-popup>
  <view class="top-wrap">
    <image class="top-img" src="/yixu/static/images/super_card/top_img.png" mode="aspectFit"></image>
    <view class="title">完善名片信息提高10倍成交</view>
  </view>
  <view class="form-card">
    <view class="title">基本信息</view>
    <view class="form-item">
      <view class="label required">
        头像
      </view>
      <view class="value">
        <view style="margin-top: -15px;position: relative;top: 20rpx;" @click="openModal('avatar','头像','upload')">
          <u-avatar size="60" :src="formData.avatar"></u-avatar>
          <view class="avatar-edit-tag">
            编辑
          </view>
        </view>
      </view>
    </view>
    <view class="form-item">
      <view class="label required">
        姓名
      </view>
      <view class="value">
        <input readonly @click="openModal('name','姓名','input')" :value="formData.name" placeholder="请输入姓名"
               placeholder-class="input-placeholder"/>
      </view>
    </view>
    <view class="form-item">
      <view class="label required">
        职位
      </view>
      <view class="value">
        <input readonly @click="openModal('position','职位','input')" :value="formData.position"
               placeholder="请输入职位" placeholder-class="input-placeholder"/>
      </view>
    </view>
    <view class="form-item">
      <view class="label required">
        电话
      </view>
      <view class="value">
        <input readonly @click="openModal('tel','电话','input')" :value="formData.tel" placeholder="请输入电话"
               placeholder-class="input-placeholder"/>
      </view>
    </view>
    <view class="form-item">
      <view class="label required">
        城市
      </view>
      <view class="value arrow">
        <input @click="openModal('company_province_id|company_city_id','公司所属城市','city')"
               :value="cityText" placeholder="请选择城市" placeholder-class="input-placeholder"/>
        <u-icon name="arrow-right" color="#c6c6c6"></u-icon>
      </view>
    </view>
    <view class="form-item">
      <view class="label required">
        公司名称
      </view>
      <view class="value">
        <input readonly @click="openModal('company_name','公司名称','input')" :value="formData.company_name"
               placeholder="请输入公司名称" placeholder-class="input-placeholder"/>
      </view>
    </view>
    <view class="form-item">
      <view class="label required">
        从业年限
      </view>
      <view class="value arrow">
        <input readonly @click="openModal('work_year','从业年限','number')" :value="formData.work_year"
               placeholder="请输入从业年限" placeholder-class="input-placeholder"/>
      </view>
    </view>
    <view class="form-item">
      <view class="label required">
        微信号
      </view>
      <view class="value">
        <input readonly @click="openModal('wechat_code','微信号','input')" :value="formData.wechat_code"
               placeholder="请输入微信号" placeholder-class="input-placeholder"/>
      </view>
    </view>
    <view class="form-item">
      <view class="label required">
        微信二维码
      </view>
      <view class="value arrow">
        <input readonly @click="openModal('wechat_qr_code','微信二维码','upload')"
               :value="formData.wechat_qr_code ? '已上传':''" placeholder="上传微信二维码"
               placeholder-class="input-placeholder"/>
        <u-icon name="arrow-right" color="#c6c6c6"></u-icon>
      </view>
    </view>
  </view>
  <view class="form-card">
    <view class="title">个人简介</view>
    <view class="form-item">
      <textarea readonly @click="openModal('intro','个人简介','textarea')" :value="formData.intro"
                placeholder="请输入个人简介" maxlength="200" placeholder-class="input-placeholder"></textarea>
      <view class="word-count">
        {{ formData.intro.length }}/200
      </view>
    </view>
  </view>

  <view class="form-card">
    <view class="title">个性标语</view>
    <view class="form-item">
      <textarea style="height: 100rpx;" readonly @click="openModal('slogan','个性标语','textarea')"
                :value="formData.slogan"
                placeholder="请输入个性标语" placeholder-class="input-placeholder"></textarea>
    </view>
  </view>

  <view class="form-card">
    <view class="title">请选择印象标签</view>
    <view style="color: #999999;font-size: 24rpx;margin-top: 10rpx;">为您自己选择职业标签，让客户为您点赞</view>
    <view class="form-item">
      <view class="w-full">
        <view class="tag-list">
          <view class="tag-item" v-for="item in formData.lable_lis" :key="item.id">{{ item.name }}</view>
        </view>
        <view class="add-tag-btn" @click="onOpenPopup('tags','印象标签','tag')">
          <u-icon name="plus" color="#3F70FF" size="28"></u-icon>
          <text>添加您的印象标签</text>
        </view>
      </view>
    </view>
  </view>

  <view class="form-card">
    <view class="title">专业评分</view>
    <view class="form-item">
      <view
          style="color: #999999;font-size: 26rpx; background: #F4F8FB; padding: 30rpx;border-radius: 10rpx;line-height: 1.6;">
        根据您的从业经历和掌握的业务知识，以及对客户的服务专业程度等，综合评分为：
        <text style="color: #FF3030;font-weight: bold;">{{ formData.score }}</text>
      </view>
    </view>
  </view>


  <view class="form-card">
    <view class="title with-right">
      <view>专业证书</view>
      <view class="add" @click="toBlockFormPage({formType:'ce'})" v-if="formData.certificate_lis.length > 0">
        <u-icon name="plus-circle" size="34"></u-icon>
        <text>添加</text>
      </view>
    </view>
    <view class="form-item">
      <view class="w-full">
        <view class="add-area" @click="toBlockFormPage({formType:'ce'})" v-if="formData.certificate_lis.length === 0">
          <view>
            <u-icon name="plus-circle" size="34"></u-icon>
            <text>添加专业证书</text>
          </view>
          <view>补全证书，让客户更好了解您的专业</view>
        </view>
        <view class="ce-list">
          <view class="ce-item" v-for="item in formData.certificate_lis" :key="item.id">
            <view class="left">
              <image class="left-icon" :src="item.image"></image>
              <view class="ce-info">
                <view class="row-1">
                  <text>{{ item.type }}</text>
                  <image class="rz-tag" src="../../static/images/super_card/rztag.png" mode="aspectFit">
                  </image>
                </view>
                <view class="row-2">
                  证书编号：{{ item.id_card }}
                </view>
              </view>
            </view>
            <u-icon name="trash-fill" color="#bbbbbb" size="40" @click="onDelete('ce','证书',item.id)"></u-icon>
          </view>
        </view>
      </view>
    </view>
  </view>

  <view class="form-card">
    <view class="title with-right">
      <view>客户案例</view>
      <view class="add" @click="toBlockFormPage({formType:'ue'})" v-if="formData.case_lis.length > 0">
        <u-icon name="plus-circle" size="34"></u-icon>
        <text>添加</text>
      </view>
    </view>
    <view class="form-item">
      <view class="w-full">
        <view class="add-area" @click="toBlockFormPage({formType:'ue'})" v-if="formData.case_lis.length === 0">
          <view>
            <u-icon name="plus-circle" size="34"></u-icon>
            <text>添加客户案例</text>
          </view>
          <view>上传实操案例，打破客户信任壁垒</view>
        </view>
        <view style="margin-top: -30rpx;">
          <view class="product-item" v-for="item in formData.case_lis" :key="item.id">
            <view  @click="toBlockFormPage({formType:'ue',id:item.id},item)">
              <view class="title ">{{item.title}}</view>
              <view class="tag">#{{item.situation}}</view>
              <view class="desc">{{item.describe}}</view>
              <view class="images">
                <u-image v-for="img in item.abs_image" :key="img.id" :src="img.url" width="160" height="160"></u-image>
              </view>
            </view>
            <u-icon name="trash-fill" color="#bbbbbb" size="40" @click="onDelete('ue','案例',item.id)"></u-icon>
          </view>
        </view>
      </view>
    </view>
  </view>


  <view class="form-card">
    <view class="title with-right">
      <view>主营产品</view>
      <view class="add" @click="toBlockFormPage({formType:'mp'})" v-if="formData.goods_lis.length > 0">
        <u-icon name="plus-circle" size="34"></u-icon>
        <text>添加</text>
      </view>
    </view>
    <view class="form-item">
      <view class="w-full">
        <view class="add-area" @click="toBlockFormPage({formType:'mp'})" v-if="formData.goods_lis.length === 0">
          <view>
            <u-icon name="plus-circle" size="34"></u-icon>
            <text>添加主营产品</text>
          </view>
          <view>添加主营产品，让客户更好了解您</view>
        </view>
        <view class="main-business-list">
          <view class="main-business-item" v-for="item in formData.goods_lis" :key="item.id">
            <view class="left-wrap" @click="toBlockFormPage({formType:'mp',id:item.id},item)">
              <view class="text-type">主营产品</view>
              <view class="info">
                <view class="row-1">
                  <view>{{ item.name }}</view>
                  <view>最高额度{{ item.limit }}万</view>
                </view>
                <view class="row-2">{{ item.advantage }}</view>
              </view>
            </view>
            <view class="right-wrap">
              <view>{{ item.rate }}</view>
              <view>年利率低至</view>
            </view>
            <u-icon name="trash-fill" color="#bbbbbb" size="40" @click="onDelete('ue','主营产品',item.id)"></u-icon>
          </view>
        </view>
      </view>
    </view>
  </view>

  <view class="form-card">
    <view class="title with-right">
      <view>教育/工作经历</view>

    </view>
    <view class="form-item">
      <view class="w-full">
        <view class="inner-title">
          <view>教育经历</view>
          <view class="add" @click="toBlockFormPage({formType:'ed'})" v-if="formData.education_lis.length > 0">
            <u-icon name="plus-circle" size="34"></u-icon>
            <text>添加</text>
          </view>
        </view>

        <view class="add-area" @click="toBlockFormPage({formType:'ed'})" v-if="formData.education_lis.length === 0">
          <view>
            <u-icon name="plus-circle" size="34"></u-icon>
            <text>添加教育经历</text>
          </view>
          <view>点击添加，完善您的教育经历</view>
        </view>
        <view style="height: 10px;" v-if="formData.education_lis.length === 0"></view>
        <view class="school-list" style="margin-top: -10px;">
          <view class="school-item" v-for="item in formData.education_lis" :key="item.id">
            <view @click="toBlockFormPage({formType:'ed',id:item.id},item)">
              <view class="name">{{ item.name }} {{ item.educational_background }}</view>
              <view class="date">{{ item.start_date }} - {{ item.end_date }}</view>
            </view>
            <u-icon name="trash-fill" color="#bbbbbb" size="40" @click="onDelete('ed','教育经历',item.id)"></u-icon>
          </view>
        </view>

      </view>
    </view>
    <view class="form-item">
      <view class="w-full">
        <view class="inner-title">
          <view>工作经历</view>
          <view class="add" @click="toBlockFormPage({formType:'wk'})" v-if="formData.work_lis.length > 0">
            <u-icon name="plus-circle" size="34"></u-icon>
            <text>添加</text>
          </view>
        </view>
        <view class="add-area" @click="toBlockFormPage({formType:'wk'})" v-if="formData.work_lis.length === 0">
          <view>
            <u-icon name="plus-circle" size="34"></u-icon>
            <text>添加工作经历</text>
          </view>
          <view>点击添加，完善您的工作经历</view>
        </view>
        <view style="height: 10px;" v-if="formData.work_lis.length === 0"></view>
        <view class="school-list" style="margin-top: -10px;">
          <view class="school-item" v-for="item in formData.work_lis" :key="item.id">
            <view @click="toBlockFormPage({formType:'wk',id:item.id},item)">
              <view class="name">{{ item.name }} {{ item.position }}</view>
              <view class="date">{{ item.start_date }} - {{ item.end_date }}</view>
            </view>
            <u-icon name="trash-fill" color="#bbbbbb" size="40" @click="onDelete('wk','工作经历',item.id)"></u-icon>
          </view>
        </view>

      </view>
    </view>

  </view>

  <view class="form-card">
    <view class="title with-right">
      <view>公司/荣誉</view>
    </view>
    <view class="form-item">
      <view class="w-full" style="margin-top: -20rpx;">
        <view v-for="(item,index) in formData.abs_company_honors_img" :key="index">
          <view style="margin-top: 20rpx;position: relative;">
            <u-image :src="item.url" height="300rpx"></u-image>
            <u-icon class="remove-icon" name="close-circle" color="#999" size="40"
                    @click="onRemoveImage(index)"></u-icon>
          </view>
        </view>
        <view style="margin-top: 20rpx;" class="add-area" @click="onUploadImage">
          <view>
            <u-icon name="plus-circle" size="34"></u-icon>
            <text>添加个人/公司照片</text>
          </view>
          <view>完善您的生活/工作照，让客户更了解您</view>
        </view>
      </view>
    </view>
  </view>

</view>
</template>

<script>
import {apiBusinessCardDetail, apiBusinessCardUpdate} from "@/yixu/api/super_card.js";
import {uploadFile} from "@/utils/tools.js";
import area from '@/utils/area'
import {
  apiArticleGoodsDelete, apiCaseDel,
  apiCertificateDel,
  apiEducationDelete,
  apiGetCardConfig,
  apiLabelEdit, apiWorkDel
} from "../../api/super_card.js";

let currentUserId = null;
const deleteApiMap = {
  ce: {
    api: apiCertificateDel
  },
  ed: {
    api: apiEducationDelete
  },
  mp: {
    api: apiArticleGoodsDelete
  },
  ue: {
    api: apiCaseDel
  },
  wk:{
    api:apiWorkDel
  }

};
export default {
  data() {
    return {
      area,
      popupOption: {
        title: '',
        show: false,
        field: '',
        type: 'tag',
        value: undefined,
        list: []
      },
      modalOption: {
        title: '',
        show: false,
        showCitySelect: false,
        field: '',
        type: 'input',
        value: undefined,
        extra: {}
      },
      cityText: '',
      formData: {
        avatar: '',
        name: '',
        tel: '',
        position: '',
        company_name: '',
        company_province_id: '',
        company_city_id: '',
        company_address: '',
        work_year: '',
        wechat_code: '',
        wechat_qr_code: '',
        business: '',
        intro: '',
        slogan: '',
        company_honors_img: '',
        abs_company_honors_img: [],
        certificate_lis: [],
        work_lis: [],
        education_lis: [],
        goods_lis: [],
        case_lis: []
      },
    };
  },
  onLoad({user_id}) {
    currentUserId = user_id;
    uni.$on('uAvatarCropper', path => {
      this.uAvatarCropperCallback(path)
    });
    this.init();
  },
  onShow() {
    this.getCardDetail(currentUserId);
  },
  methods: {
    async init() {
      const tagResult = await apiGetCardConfig({type: 3});
      this.popupOption.list = tagResult.data;
    },
    async onOpenPopup(field, title, type) {
      this.popupOption.field = field;
      this.popupOption.title = title;
      this.popupOption.type = type;
      this.popupOption.show = true;
      // 这是默认选中标签
      if (type === 'tag') {
        let tags = this.formData.lable_lis.map(item => item.name);
        this.popupOption.list.map(item => {
          item.active = tags.includes(item.name);
          return item;
        })
      }

    },
    async getCardDetail(user_id = undefined) {
      try {
        const result = await apiBusinessCardDetail({user_id});
        let data = result.data;
        if(data){
          this.formData = data;
          this.cityText = data.company_province_name + '/' + data.company_city_name;
        }
      } finally {

      }
    },
    openModal(field, title, type, extra = {}) {
      if (type === 'upload') {
        this.selectAvatar();
      } else if (type === 'city') {
        this.modalOption.showCitySelect = true;
      } else {
        this.modalOption.show = true;
      }
      this.modalOption.title = title;
      this.modalOption.type = type;
      this.modalOption.field = field;
      this.modalOption.value = this.formData[field];
      this.modalOption.extra = extra;
    },
    async onModalConfirm() {
      let {field, value} = this.modalOption;
      this.formData[field] = value;
      console.log(value);
      try {
        await apiBusinessCardUpdate({[field]: value});
        uni.showToast({icon: 'none', title: '成功'})
      } finally {
        this.modalOption.show = false;
      }
    },
    selectAvatar() {
      this.nowSelectImage = 'avatar';
      this.$u.route({
        url: '/components/uview-ui/components/u-avatar-cropper/u-avatar-cropper',
        params: {
          destWidth: 150,
          rectWidth: 150,
          fileType: 'jpg',
        }
      })
    },
    uAvatarCropperCallback(path) {
      let _this = this;
      if (_this.$u.test.isEmpty(path)) return;
      uni.showLoading({
        title: "正在上传中...",
        mask: true,
      });
      uploadFile(path)
          .then((res) => {
            uni.hideLoading();
            _this.modalOption.value = res.url;
            _this.formData[_this.modalOption.field] = res.url;
            _this.onModalConfirm();
          })
          .catch((e) => {
            console.log('eee',e);
            uni.hideLoading();
            this.$toast({
              title: "上传失败",
            });
          });
    },
    async onConfirmCity(e) {
      const [s, c] = e;
      this.formData.company_city_id = c.value;
      this.formData.company_province_id = s.value;
      this.cityText = c.label + '/' + s.label;
      try {
        await apiBusinessCardUpdate({company_city_id: c.value, company_province_id: s.value});
        uni.showToast({icon: 'none', title: '成功'})
      } finally {

      }
    },
    toBlockFormPage(params, data) {
      uni.setStorageSync(params.formType + '_data', data);
      this.$u.route({
        url: '/yixu/pages/super_card/block_form',
        params
      })
    },
    async onDelete(type, label, id) {
      let _this = this;
      uni.showModal({
        title: '提示',
        content: '确认删除该' + label + '吗?',
        async success(result) {
          if (result.confirm) {
            try {
              const result = await deleteApiMap[type].api({id});
              if (result.code === 1) {
                uni.$u.toast('删除成功');
                _this.getCardDetail();
              } else {
                uni.$u.toast(result.msg);
              }
            } finally {

            }
          }
        }
      })

    },
    onUploadImage() {
      let _this = this;
      uni.chooseImage({
        count: 1,
        async success(res) {
          const file = res.tempFilePaths[0];
          uni.showLoading({
            title: "正在上传中...",
            mask: true,
          });
          try {
            const uploadResult = await uploadFile(file);
            _this.formData.abs_company_honors_img.push({url: uploadResult.url});
            let params = {company_honors_img: _this.formData.abs_company_honors_img.map(item => item.url).join(',')};
            console.log('params', params);
            await apiBusinessCardUpdate(params);
            uni.$u.toast('更新成功');
            uni.hideLoading();
          } catch (e) {
            uni.hideLoading();
            uni.$u.toast('上传失败');
          }

        }
      })

    },
    async onRemoveImage(index) {
      let imgs = this.formData.abs_company_honors_img;
      try {
        imgs.splice(index, 1);
        let newImages = imgs.map(item => item.url).join(',');
        let params = {company_honors_img: newImages};

        if (imgs.length === 0) {
          newImages = '';
          params = {___company_honors_img: newImages};
        }

        await this.$nextTick();
        await apiBusinessCardUpdate(params);
        uni.$u.toast('更新成功');
      } finally {

      }
    },
    onSelectTag(item) {
      if (typeof item.active === 'undefined') {
        this.$set(item, 'active', true);
        return;
      }
      item.active = !item.active;
    },
    async onPopupConfirm() {
      let {list, field} = this.popupOption;
      let tags = list.filter(item => item.active).map(item => item.name);
      if (tags.length == 0) return;
      this.formData[field] = tags;
      try {
        uni.showLoading();
        await apiLabelEdit({name: tags.join(',')});
        uni.$u.toast('更新成功');
        this.popupOption.show = false;
      } finally {
        uni.hideLoading();
      }

    }
  }
}
</script>

<style lang="scss" scoped>
.popup-wrap {
  padding: 30rpx;

  .header {
    display: flex;
    justify-content: space-between;

    view:nth-child(1) {
      color: #999999;
    }

    view:nth-child(2) {
      font-weight: bold;
    }

    view:nth-child(3) {
      color: #3F70FF;
    }

    margin-bottom: 30rpx;
  }
}

.product-item{
  display:flex;
  justify-content: space-between;
  align-items: baseline;
  border-bottom: 2rpx solid #efefef;
  padding:30rpx 0;
  &:last-child{
    border: unset;
  }
  .title{
    font-weight: bold;
    letter-spacing: 1px;
  }
  .tag{
    color: #fa3534;
    font-size: 28rpx;
  }
  .desc{
    color: #999999;
    font-size: 28rpx;
  }
  .images{
    display: flex;
    gap: 20rpx;
    margin-top: 20rpx;
  }
}
.remove-icon {
  position: absolute;
  right: -10rpx;
  top: -10rpx;
}

.add-tag-btn {
  color: #3F70FF;
  border: 2rpx solid #3F70FF;
  display: inline-block;
  margin-top: 20rpx;
  padding: 10rpx 20rpx;
  border-radius: 100rpx;

  text {
    margin-left: 10rpx;
  }
}

.tag-list {
  display: flex;
  gap: 20rpx;
  flex-wrap: wrap;

  .tag-item {
    color: #333333;
    background-color: rgba(63, 112, 255, 0.09);
    padding: 10rpx 20rpx;
    border-radius: 200rpx;
  }

  .active {
    background-color: #3F70FF;
    color: white;
  }
}

.top-wrap {
  position: relative;

  .top-img {
    width: 100%;
    height: 200rpx;
  }

  .title {
    position: absolute;
    left: 30rpx;
    color: white;
    font-size: 40rpx;
    top: 80rpx;

    &::after {
      content: '';
      position: absolute;
      height: 3px;
      width: 200rpx;
      bottom: -20rpx;
      left: 0;
      background: linear-gradient(to right, white, transparent);
    }

  }
}

::v-deep .u-model__title {
  padding-top: 20rpx;
}


.work-list {
  border-bottom: unset !important;
}

.school-list, .work-list {

  .school-item, .work-item {
    padding: 10rpx 0;
    font-weight: 400;
    font-size: 28rpx;
    color: #161616;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .date {
      font-size: 26rpx;
      color: #999999;
      padding-top: 4rpx;
    }
  }
}

.avatar-edit-tag {
  display: inline-block;
  background: #3F70FF;
  border-radius: 10rpx;
  padding: 4rpx 8rpx;
  color: white;
  font-size: 16rpx;
  position: absolute;
  bottom: 0;
  left: 6rpx;
  z-index: 2;
}

.input-wrap {
  border: 2rpx solid #efefef;
  padding: 10rpx 30rpx;

  .modal-input {
    border: unset;
    outline: unset;
  }
}

.form-card {
  padding: 30rpx;
  background: white;
  margin: 30rpx;
  border-radius: 10rpx;

  .title {
    font-size: 34rpx;
    letter-spacing: 2px;
  }

  .with-right {
    display: flex;
    justify-content: space-between;

    .add {
      color: #3F70FF;
      font-size: 28rpx;
      display: flex;
      align-items: center;
    }
  }

  .form-item {
    display: flex;
    justify-content: space-between;
    position: relative;
    padding: 30rpx 0;
    border-bottom: 2rpx solid #EEEEEE;

    .inner-title {
      display: flex;
      justify-content: space-between;
      margin-bottom: 30rpx;

      view:first-child {
        font-size: 30rpx;
      }

      view:last-child {
        color: #3F70FF;
        display: flex;
        align-items: center;
      }
    }

    .main-business-list {
      .main-business-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-bottom: 2rpx solid #EEEEEE;
        padding: 30rpx 0;

        &:last-child {
          border-bottom: unset;
        }
      }

      .left-wrap {
        display: flex;
        gap: 10rpx;
        align-items: center;

        .text-type {
          width: 90rpx;
          text-align: center;
          padding: 8rpx;
          background: #E0EDFF;
          color: #84ACE2;
          line-height: 1.2;
          border-radius: 8rpx;
        }

        .info {
          .row-1 {
            display: flex;
            gap: 10rpx;
            align-items: center;

            view:first-child {
              font-weight: 500;
              font-size: 30rpx;
              color: #000000;
            }

            view:last-child {
              padding: 5rpx 8rpx;
              color: #3F70FF;
              background: #EBF0FF;
              font-size: 20rpx;
              height: fit-content;
            }
          }

          .row-2 {
            font-size: 24rpx;
            color: #999999;
          }
        }
      }

      .right-wrap {
        text-align: center;
        position: relative;
        right: -50rpx;

        view:first-child {
          font-weight: bold;
          font-size: 32rpx;
          color: #FF3030;
        }

        view:last-child {
          font-size: 20rpx;
          color: #999999;
        }
      }
    }

    .ce-list {
      .ce-item {
        display: flex;
        justify-content: space-between;
        align-items: center;

        .left {
          display: flex;
          gap: 20rpx;
        }

        padding: 15rpx 0;
        border-bottom: 2rpx solid #EEEEEE;

        &:last-child {
          border-bottom: unset;
        }

        .left-icon {
          width: 80rpx;
          height: 80rpx;
          flex-direction: 1;

        }

        .ce-info {
          display: flex;
          flex-direction: column;
          justify-content: space-around;

          .rz-tag {
            width: 100rpx;
            height: 30rpx;
            margin-left: 10rpx;
          }

          .row-1 {
            display: flex;
            align-items: center;

            text {
              font-weight: 500;
              font-size: 28rpx;
            }
          }

          .row-2 {
            font-size: 24rpx;
            color: #999999;
            line-height: 33rpx;
          }

        }
      }
    }

    .add-area {
      background: #F4F8FB;
      border-radius: 10px;
      width: 100%;
      padding: 40rpx;
      text-align: center;

      view:first-child {
        font-weight: 500;
        font-size: 28rpx;
        color: #3F70FF;
        display: flex;
        align-items: center;
        justify-content: center;

        text {
          padding-left: 10rpx;
        }
      }

      view:last-child {
        color: #999999;
        font-weight: 400;
        font-size: 24rpx;
        margin-top: 10rpx;
      }
    }

    &:last-child {
      border-bottom: unset;
      padding-bottom: 0;
    }

    .label {

    }

    .arrow {
      display: flex;
      align-items: center;
    }

    textarea {
      background: #F4F8FB;
      height: 160rpx;
      width: 100%;
      padding: 20rpx 20rpx 60rpx;
      border-radius: 10rpx;
      color: #606060;
      font-size: 30rpx;
    }

    .word-count {
      font-weight: 400;
      font-size: 28rpx;
      color: #999999;
      line-height: 40rpx;
      text-align: right;
      font-style: normal;
      position: absolute;
      right: 20rpx;
      bottom: 10rpx;
    }

    .input-placeholder {
      color: #BABABA;
      font-size: 30rpx;
    }

    .value {

      input {
        text-align: right;
        color: #606060;
        font-size: 30rpx;
        position: relative;
      }
    }

    .required {
      padding-left: 13px;

      &::after {
        content: '*';
        color: red;
        position: absolute;
        left: 0;
        top: 34rpx;
      }
    }
  }
}
</style>
